<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>社区</title>
  <link rel="stylesheet" href="css/community.css">
  <script src="js/community.js"></script>
  <link rel="stylesheet" href="font/iconfont.css">

</head>
<body>
<div class="top-nav">
  <ul>
    <li class="active">派对</li>
    <li>歌房</li>
    <li>广场</li>
    <li>关注</li>
  </ul>
</div>
<div class="content">
  <div class="categories">
    <div class="category-card">
      <img id="changing-image" src="picture/c1.jpg" alt="轮播图片" style="width:100%;">
      <span>歌手2024</span>
      <p>一起进来探索</p>
    </div>
    <div class="category-card" style="height: 150px;width: 220px">
      <img src="picture/c2.jpg" alt="歌手猜歌" style="width: 200px;height: 130px">
      <span>歌手猜歌</span>
      <p>挑战赢歌手签名照</p>
    </div>
    <div class="category-card" >
      <img src="picture/c3.jpg" alt="弹一弹">
      <span>弹一弹</span>
      <p>解锁听歌新姿势</p>
    </div>
    <div class="category-card" style="margin-top: -30vw">
      <img src="picture/c4.jpg" alt="KTV">
      <span>KTV</span>
      <p>一起唱歌交朋友</p>
      <p>一起进入音乐世界</p>
      <p>你快乐，我也快乐</p>
      <p>❤️❤️❤️</p>
    </div>
  </div>

  <div class="tabs">
    <span class="active">优质</span>
    <span>精选</span>
    <span>大合唱</span>
  </div>

  <div class="video-grid">
    <div class="video-card">
      <div class="video-info">
        <img src="picture/c7.jpg">
        <span>我的相关歌房</span>
        <p>登录全民K歌查看</p>
      </div>
    </div>
    <div class="video-card">
      <div class="video-info">
        <img src="picture/c8.jpg">
        <span>歌房任意门</span>
        <p>随机匹配，结识好友</p>
      </div>
    </div>

  </div>
</div>

<div class="footer">
  <div>
    <a href="index.html">
      <span class="icon iconfont">&#xe818;</span>
      <div class="footer-item">首页</div>
    </a>
  </div>
  <div>
    <a href="broadcast.html">
      <span class="icon iconfont">&#xe8c1;</span>
      <div class="footer-item">直播</div>
    </a>
  </div>
  <div>
    <a href="more.html">
      <span class="icon iconfont">&#xe62e;</span>
      <div class="footer-item">更多</div>
    </a>
  </div>
  <div>
    <a href="community.html">
      <span class="icon iconfont">&#xe627;</span>
      <div class="footer-item">社区</div>
    </a>
  </div>
  <div>
    <a href="my.html">
      <span class="icon iconfont">&#xe819;</span>
      <div class="footer-item">我的</div>
    </a>
  </div>
</div>

</body>
</html>
